<template>
	<div class="search">
		<div class="search-box-wrapper">
			<search-box ref="searchBox" @query="onQueryChange"></search-box>
		</div>
		<div class="shortcut-wrapper" v-show="!query" ref="shortcutWrapper">
			<scroll
				ref="shortcut"
				class="shortcut"
				:data="shortcut"
				:refreshDelay="refreshDelay"
			>
				<div>
					<div class="hot-key">
						<h1 class="title">热门搜索</h1>
						<ul>
							<li
								v-for="item in hotKeys"
								:key="item.key"
								class="item"
								@click="addQuery(item.key)"
							>
								<span>{{item.key}}</span>
							</li>
						</ul>
					</div>
					<div class="search-history" v-show="searchHistory.length">
						<h1 class="title">
							<span class="text">搜索历史</span>
							<span class="clear" @click="showConfirm">
								<i class="icon-clear"></i>
							</span>
						</h1>
						<search-list
							:searches="searchHistory"
							@select="addQuery"
							@delete="deleteSearchHistory"
						>
						</search-list>
					</div>
				</div>
			</scroll>
		</div>
		<div ref="searchResult" class="search-result" v-show="query">
			<suggest
				ref="suggest"
				@listScroll="blurInput"
				@select="saveSearch"
				:query="query"
			>
			</suggest>
		</div>
		<confirm
			ref="confirm"
			text="确定清空搜索历史"
			confirmBtnText="清空"
			@confirm="clearAll"
		>
		</confirm>
		<router-view></router-view>
	</div>
</template>

<script>
	import SearchBox from '@/base/search-box/search-box'
	import Suggest from '@/components/suggest/suggest'
	import SearchList from '@/base/search-list/search-list'
	import Confirm from '@/base/confirm/confirm'
	import Scroll from '@/base/scroll/scroll'
	import { getHotKeys } from '@/service/search'
	import { playlistMixin } from '@/common/js/mixin'
	import { mapGetters, mapActions } from 'vuex'

	export default {
		name: 'Search',
		mixins: [playlistMixin],
		data() {
			return {
				hotKeys: [],
				query: '',
				refreshDelay: 120
			}
		},
		async created() {
			const result = await getHotKeys();
			if (result) {
				this.hotKeys = result.hotKeys;
			}
		},
		computed: {
			shortcut() {
				return this.hotKeys.concat(this.searchHistory);
			},
			...mapGetters(['searchHistory'])
		},
		watch: {
			query(newQuery) {
				if (!newQuery) {
					setTimeout(() => {
						this.$refs.shortcut.refresh();
					}, 20);
				}
			}
		},
		methods: {
			handlePlaylist(playlist) {
				const bottom = playlist.length > 0 ? '60px' : 0;
				this.$refs.shortcutWrapper.style.bottom = bottom;
				this.$refs.shortcut.refresh();
				this.$refs.searchResult.style.bottom = bottom;
				this.$refs.suggest.refresh();
            },
			addQuery(text) {
				this.$refs.searchBox.setQuery(text);
			},
			onQueryChange(query) {
				this.query = query;
			},
			blurInput() {
				this.$refs.searchBox.blur();
			},
			saveSearch() {
				this.saveSearchHistory(this.query);
			},
			showConfirm() {
				this.$refs.confirm.show();
			},
			clearAll() {
				this.clearSearchHistory();
			},
			...mapActions(['saveSearchHistory', 'deleteSearchHistory', 'clearSearchHistory'])
		},
		components: {
			SearchBox,
			Suggest,
			SearchList,
			Confirm,
			Scroll
		}
	}
</script>

<style lang="stylus" scoped>
	@import '../../common/stylus/variable'
	@import '../../common/stylus/mixin'
	
	.search
		touch-action: none
		.search-box-wrapper
			margin: 20px
		.shortcut-wrapper
			width: 100%
			position: fixed
			top: 178px
			bottom: 0
			bottom: 0
			.shortcut
				height: 100%
				overflow: hidden
				.hot-key
					margin: 0 20px 20px 20px
					.title
						margin-bottom: 20px
						font-size: $font-size-medium
						color: $color-text-l
					.item
						display: inline-block
						padding: 5px 10px
						margin: 0 20px 10px 0
						border-radius: 6px
						background: $color-highlight-background
						font-size: $font-size-medium
						color: $color-text-d
				.search-history
					position: relative
					margin: 0 20px
					.title
						display: flex
						align-items: center
						height: 40px
						font-size: $font-size-medium
						color: $color-text-l
						.text
							flex: 1
						.clear
							extend-click()
						.icon-clear
							font-size: $font-size-medium
							color: $color-text-d
		.search-result
			position: fixed
			width: 100%
			top: 178px
			bottom: 0
</style>